<template>
  <div>
    <Swiper :list="list" />
    <div class="fpMain">
      <div class="crumbs">
        <span class="title">扶贫政策</span>
        <span class="address">您现在的位置：扶贫政策</span>
      </div>
      <div class="search">
        <span>标题</span>
        <el-input placeholder="标题" v-model="search">
          <el-button slot="append" size="mini">
            <i class="el-icon-search"></i>
            搜索
          </el-button>
        </el-input>
      </div>
      <div class="list">
        <ul id="listBox">
          <li class="card" v-for="(all,index) in list" :key='index' @click="$router.push({name:'fpinfo',params:{id:all.id}})">
            <div class="cardImgBox">
              <img :src="all.cover" />
            </div>
            <div class="cardTextBox">
              <span>{{all.title}}</span>
            </div>
          </li>
        </ul>
      </div>
      <Pagination :pageNo="pageNum" :pageSize="pageSize" :totalRows="totalRows" @pageChange="pageChange" />
    </div>
  </div>
</template>
<script>
import { reqGetFuPinList } from "../../../api";
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 6,
      totalRows:1,
      search: "",
      list: [],
    };
  },
  created() {
    this.getFuPinList();
  },
  methods: {
    async getFuPinList() {
      let { pageNum, pageSize } = this;
      let result = await reqGetFuPinList({ pageNum, pageSize });
      if (result.code != 200) return console.error("faile");
      this.list = result.data.list;
      this.totalRows = result.data.total
    },
    pageChange(page){
        this.pageNum = page
        this.getFuPinList()
    }
  },
};
</script>

<style lang="less" scoped>
.fpMain {
  width: 70%;
  height: 500px;
  margin: 0px auto;
  .crumbs {
    border-left: 5px solid #333;
    padding: 7px 0px;
    .title {
      margin: 5px;
    }
    .address {
      font-size: 12px;
      color: gray;
    }
  }
  .search {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 30px;
    span {
    }
    .el-input {
      width: 130px;
      div {
        border: none;
        .el-button {
          background-color: rgb(119, 200, 227);
          color: white;
          height: 39px;
          font-size: 14px;
          border: none !important;
          outline: none;
          padding: 7px 5px;
        }
      }
    }
  }
  .list {
    #listBox {
        display: flex;
        flex-wrap:wrap;
      .card {
        
        width: 48%;
        box-sizing: border-box;
        border: 1.5px gray solid;
        border-radius: 7px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 10px 5px;
        .cardImgBox {
            flex: 0.3;
            display: flex;
            justify-content: center;
          img {
            border-radius: 50%;
            width: 120px;
            height: 120px;
          }
        }
        .cardTextBox {
          flex: 0.5;
        }
      }
    }
  }
}
</style>